import React,{useState,useEffect} from 'react'
import * as antd from 'antd'

const UseEffect = function(){

    const [count, setCount] = useState(0);


    /**
     * 决定useEffect中各部分代码角色的是第二个参数：
        什么都不传，组件每次 render 之后 useEffect 都会调用，相当于 componentDidMount 和 componentDidUpdate
        传入一个空数组 [], 只会调用一次，相当于 componentDidMount 和 componentWillUnmount
        传入一个数组，其中包括变量，只有这些变量变动时，useEffect 才会执行 相当于componentDidUpdate
     */

    //1. useEffect没有第二个参数, 则useEffect的第一个函数会在每次render时执行
    useEffect(() => {
        console.log("--------");
    });

    //2. useEffect第二个参数的数组中有依赖值 则useEffect的第一个函数相当于componentDidUpdate
    useEffect(() => {
        // 相当于 componentDidMount、componentDidUpdate
        console.log("componentDidUpdate")
    },[count]);

    //3. useEffect第二个参数的数组中是空的, 则useEffect的第一个函数返回值相当于componentWillUnmount
    useEffect(() => {
        return () => { 
            console.log("componentWillUnmount");
        }
    },[]);


    //4. useEffect第二个参数的数组中是空的, 则useEffect的第一个函数体相当于componentDidMount
    useEffect(() => {
        console.log("componentDidMount");
    },[]);

    

    return (
        <div>
          <h4>useEffect</h4>
            count :  {count} <antd.Divider type="vertical"></antd.Divider>
          <antd.Button onClick={() => {setCount(count+1)}} type="primary"> +1 </antd.Button>
        </div>
      )

}


export default UseEffect;